<template>
  <div class="city-picker noscroll-bar">
    <section>
      <city-location title='定位城市'></city-location>
    </section>
    <section v-if="history.length">
      <city-inline :cities='history' title='最近访问城市'></city-inline>
    </section>
    <section>
      <city-inline :cities='cityList.hot' title='热门城市'></city-inline>
    </section>
    <section>
      <city-group v-for='cityGroup in cityList.nomal' :cityGroup='cityGroup' :key='cityGroup.capital'></city-group>
    </section>
    <section class="city-picker-sidecontainer">
      <side-bar :sideData='sideData' @updateChar='updateChar' @showChar='showChar'></side-bar>
    </section>
    <div class="city-picker-current-char" :class="showCurrentChar">{{currentChar}}</div>
  </div>
</template>
<script>
import data from './data'
import CityGroup from './CityGroup'
import CityInline from './CityInline'
import SideBar from './SideBar'
import CityLocation from './CityLocation'
export default {
  data () {
    return {
      currentCity: '',
      currentChar: '',
      history: [],
      charFlag: false,
      sideData: ['定位', '最近', '热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      cityList: data
    }
  },
  mounted () {
    this.history = this.$storage.get('historyCities')
  },
  computed: {
    showCurrentChar () {
      return {
        'city-picker-current-char-show': this.charFlag
      }
    }
  },
  methods: {
    updateChar (msg) {
      this.currentChar = msg.substr(0, 1)
      const target = this.$el.querySelector('[data-ch="' + msg + '"]')
      if (target) {
        target.scrollIntoView()
      }
    },
    showChar (flag) {
      this.charFlag = flag
    }
  },
  components: {
    CityGroup,
    CityInline,
    CityLocation,
    SideBar
  }
}
</script>
<style lang="scss">
.city-picker {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:#f5f5f5;
  color:#494949;
  overflow-y: scroll;
  &-sidecontainer{
    position: fixed;
    top: 0;
    right: 0;
    bottom:0;
    width: 60px;
    z-index: 10;
    text-align: center;
    font-size: 12px;
  }
  &-current-char{
    position: fixed;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 60px;
    top: 617px;
    left: 325px;
    background: #000;
    opacity: .6;
    text-align: center;
    color: #fff;
    display: none;
    border-radius: 50%;
    &-show{
      display: block;
    }
  }
}
</style>
